<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      :title="title"
      width="25%"
      :before-close="handleClose"
    >
      <el-form
        :model="formData"
        ref="ruleFormRef"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="公司名称" prop="companyName">
          <el-select v-model="formData.companyName" style="width: 85%">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="">
          <el-upload
            v-model:file-list="fileList"
            class="upload-demo"
            :before-upload="beforeAvatarUpload"
            :action="url"
            multiple
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            accept=".jpg,.jpeg,.png"
            :limit="1"
            :on-exceed="handleExceed"
          >
            <el-button type="primary">
              <IconifyIconOffline :icon="Upload" />本地上传
            </el-button>
            <template #tip>
              <div v-if="flag" class="red_words">请上传logo!</div>
              <div class="el-upload__tip">上传图片格式小于100MB</div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button @click="cancel()">取消</el-button>
          <el-button type="primary" @click="onSubmit(ruleFormRef)"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ElMessageBox, ElMessage } from "element-plus";
import { ref, reactive, onMounted } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import type { UploadProps, UploadUserFile } from "element-plus";
import Upload from "@iconify-icons/ep/upload";

const props = defineProps(["title"]);
const dialogVisible = ref(false);

const formData = reactive({
  companyName: ""
});
const url = ref("https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15");
const fileList = ref<UploadUserFile[]>([]);
const ruleFormRef = ref<FormInstance>();
const options = [
  {
    label: "公司1",
    value: 1
  },
  {
    label: "公司2",
    value: 2
  },
  {
    label: "公司3",
    value: 3
  }
];
const flag = ref(false); //判断有否有logo

const rules = reactive<FormRules>({
  companyName: [{ required: true, message: "请选择公司名称", trigger: "blur" }]
});

const handleRemove: UploadProps["onRemove"] = (file, uploadFiles) => {
  console.log(file, uploadFiles);
};

const handlePreview: UploadProps["onPreview"] = uploadFile => {
  console.log(uploadFile);
};

const beforeAvatarUpload: UploadProps["beforeUpload"] = rawFile => {
  console.log("rawFile", rawFile);
  if (rawFile.type !== "image/jpeg" && rawFile.type !== "image/png") {
    ElMessage.error("Avatar picture must be JPG format!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("Avatar picture size can not exceed 2MB!");
    return false;
  }
  return true;
};

const handleExceed: UploadProps["onExceed"] = (files, uploadFiles) => {
  ElMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`
  );
};

function cancel() {
  this.dialogVisible = false;
}

const getValue = value => {
  console.log("value", value);
};
const onSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (fileList.value.length == 0) {
        flag.value = true;
      } else {
        flag.value = false;
      }
    } else {
      if (fileList.value.length == 0) {
        flag.value = true;
      }
      console.log("error submit!", fields);
    }
  });
};

const handleClose = (done: () => void) => {
  ElMessageBox.confirm("确定关闭弹窗嘛?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};

//暴露出值和方法，供父组件调用
defineExpose({
  dialogVisible,
  getValue
});
</script>

<style scoped>
.red_words {
  color: red;
}
</style>
